<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all-neptune.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/ckeditor/sample.css" />
    <script type="text/javascript" src="../lib/ext/ext-all.js"></script>
    <script type="text/javascript" src="../lib/gf/common_grid.js"></script>
    <script type="text/javascript" src="../lib/ext/plugins/datetime/UX_TimePickerField.js"></script>
    <script type="text/javascript" src="../lib/ext/plugins/datetime/UX_DateTimePicker.js"></script>
    <script type="text/javascript" src="../lib/ext/plugins/datetime/UX_DateTimeField.js"></script>
    <script type="text/javascript" src="../lib/ext/plugins/datetime/UX_DateTimeMenu.js"></script>
    <script type="text/javascript" src="../lib/gf/common_alert.js"></script>

    <style type="text/css">
        .redcss{color: red; }
    </style>
</head>
<script type="text/javascript">
    Ext.Loader.setConfig({enabled: true});
    var dataForm;
    var data = null;
    Ext.onReady(function () {

        var form_id;
        var _urlparams = Ext.urlDecode(document.URL.split("?")[document.URL.split("?").length - 1]);
        if(_urlparams && _urlparams.form_id){
            form_id = _urlparams.form_id;
        }

        //保存数据
        function doAdd(){
            var params = dataForm.form.getValues();
            params.form_id = form_id;
            if(!dataForm.form.isValid()){
                Ext.Msg.alert('系统提示','请修正指出错误，检查输入是否正确!');
                return;
            }

            var _url = '/form/field/add';
            if(params && params._id ){
                _url = '/form/field/edit';
            }
            Ext.Ajax.request({
                url: _url,
                params : params,
                method : 'POST',
                success: function(response, opts) {
                    //var data = eval("("+response.responseText+")");
                    var data = Ext.decode(response.responseText);
                    if(data.flag == "success") {
                        alert_msg_refresh_close_win('业务处理成功！');
                    }else {
                        alert_msg('业务处理失败！'+data.msg);
                    }
                },
                failure: function(response, opts) {
                    alert_msg('业务处理失败！');
                }
            });
        }

        //关闭窗口
        function doClose(){
            parent.closeWin();
        }
        var tbar = [
            {pressed: true,text: '保  存',handler: doAdd,icon : '../img/book.png'},
            {pressed: true,text: "关  闭",handler: doClose,icon : '../img/close.png'}
        ];

        var allow_blank_status = new Ext.form.RadioGroup({
            fieldLabel : '允许为空',
            name:'allow_blank',
            id:'allow_blank',
            labelAlign:'right',
            columns: [100,100],
            colspan : 1,
            items: [{id:'allow_yes',boxLabel: '是', checked: true, name: 'allow_blank',inputValue:true},
                {id:'allow_no',boxLabel: '否', name: 'allow_blank',inputValue:false}]
        });

        var read_only = new Ext.form.RadioGroup({
            fieldLabel : '只读',
            name:'read_only',
            id:'read_only',
            columns: [100,100],
            colspan : 2,
            labelAlign:'right',
            items: [{id:'read_yes',boxLabel: '是', name: 'read_only',inputValue:true},
                {id:'read_no',boxLabel: '否', name: 'read_only',inputValue:false,checked: true}]
        });

        // var use_url = new Ext.form.RadioGroup({
        //     fieldLabel : '使用远程数据源',
        //     name:'use_url',
        //     id:'use_url',
        //     columns: [100,100],
        //     colspan : 1,
        //     items: [{id:'use_yes',boxLabel: '是', name: 'use_url',inputValue:true},
        //         {id:'use_no',boxLabel: '否', name: 'use_url',inputValue:false,checked:true}]
        // });

        dataForm = new Ext.FormPanel({
            autoScroll:true,
            overflowY: 'scroll',
            items: [
                {
                    xtype: 'form',
                    defaults: {
                        xtype: 'textfield',
                        labelAlign: 'right'
                    },layout: {type: 'table',columns:3},
                    items: [
                        {
                            name : '_id',
                            hidden : true
                        },
                        {
                            xtype: 'combobox',
                            fieldLabel: '控件类型',
                            autoRender: true,
                            autoShow: true,
                            typeAhead:true,
                            queryMode:'local',
                            name : 'xtype',
                            displayField: 'key_name',
                            valueField: 'key_code',
                            editable : false,
                            allowBlank: false,
                            value : 'textfield',
                            store:Ext.create('Ext.data.Store', {
                                autoLoad: true,
                                fields: ['key_code','key_name'],
                                proxy: {
                                    type: 'ajax',
                                    url : '/dict/list?parent_code=field_type',
                                    reader: {
                                        type: 'json',
                                        root: ''
                                    }
                                }
                            }),
                            listeners:{
                                'change': function(_this, newValue, oldValue, eOpts ){
                                    Ext.getCmp('combobox_extra_group').collapse();
                                    Ext.getCmp('radio_extra_group').collapse();
                                    Ext.getCmp('cascade_group').collapse();
                                    if(newValue == 'combobox' ){
                                        Ext.getCmp('combobox_extra_group').expand();
                                    }                          
                                    if(newValue == 'radiogroup' || newValue == 'checkboxgroup'){
                                        Ext.getCmp('radio_extra_group').expand();
                                    }                           

                                    if(newValue == 'cascade'){
                                        Ext.getCmp('cascade_group').expand();
                                        
                                    }

                                }
                            }
                        },
                        {
                            xtype: 'combobox',
                            fieldLabel: '数据类型',
                            autoRender: true,
                            autoShow: true,
                            typeAhead:true,
                            queryMode:'local',
                            name : 'data_type',
                            displayField: 'key_name',
                            valueField: 'key_code',
                            editable : false,
                            allowBlank: false,
                            store:Ext.create('Ext.data.Store', {
                                autoLoad: true,
                                fields: ['key_code','key_name'],
                                proxy: {
                                    type: 'ajax',
                                    url : '/dict/list?parent_code=data_type',
                                    reader: {
                                        type: 'json',
                                        root: ''
                                    }
                                }
                            })
                        },
                        {
                            fieldLabel: '数据格式',
                            name : 'data_format',
                            allowBlank: true
                        },
                        {
                            fieldLabel: '字段标签',
                            name : 'field_label',
                            allowBlank: false
                        },{
                            fieldLabel: '字段名(英文)',
                            name : 'name',
                            allowBlank: false
                        },{
                            xtype:'numberfield',
                            fieldLabel: '跨列',
                            name : 'colspan',
                            allowBlank: false,
                            maxValue:4,
                            minValue:1,  
                            value:3
                        },{
                            xtype:'numberfield',
                            fieldLabel: '宽度',
                            name : 'width',
                            allowBlank: false,
                            maxValue:600,
                            minValue:255,
                            value:300
                        },{
                            xtype:'numberfield',
                            fieldLabel: '高度',
                            name : 'height'
                        },
                        allow_blank_status,read_only,
                        {fieldLabel:'显示顺序',name:'order',xtype:'numberfield',colspan : 3,value:1},
                        {
                            xtype:"textareafield",
                            id : 'items',
                            fieldLabel: 'items',
                            name : 'items',
                            colspan : 3,
                            allowBlank: true,
                            // hidden : true,
                            width:615
                        },
                        {
                                    fieldLabel: '远程数据源URL',
                                    name : 'url',
                                    colspan : 3,
                                    allowBlank: true,
                                    width : 615
                        },
                        {
                            id : 'combobox_extra_group',
                            xtype :'fieldset',
                            title: '下拉框扩展信息',
                            colspan : 3,
                            width : '100%',
                            defaultType: 'textfield',
                            collapsible : true,
                            collapsed : true,
                            layout: {type: 'table',columns:3},
                            items :[
                                {
                                    fieldLabel: '显示字段',
                                    name : 'display_field',
                                    colspan : 1,
                                    allowBlank: true,
                                    value:'key_name'
                                },
                                {
                                    fieldLabel: '值字段',
                                    name : 'value_field',
                                    colspan : 2,
                                    allowBlank: true,
                                    value:'key_code'
                                },
                                // use_url,
                                // {xtype : 'label'},
                                // {xtype : 'label'},
                                
                                {
                                    xtype : 'label',
                                    colspan : 3,
                                    html : "<div style='border-style:solid;border-width:3px;border-color:green'><div><b>填写说明：</b></br>1 显示字段、值字段和items填写的格式如下。</br>2 当使用远程数据源时，items不用填写。</br></br><b>例如</b>(key_name显示字段;key_code值字段;)</div><div style='color:blue;background-color:silver;'>{'key_name': '中国','key_code': 'CN'}</br>{'key_name': '美国','key_code': 'US'}</br>{'key_name': '香港','key_code': 'HK' }</div></div>"
                                }
                            ]
                        },
                        {
                            id : 'radio_extra_group',
                            xtype :'fieldset',
                            title: '单选/多选框扩展信息',
                            colspan : 3,
                            width : '100%',
                            collapsible : true,
                            collapsed : true,
                            // hidden : true,
                            defaultType: 'textfield',
                            layout: {type: 'table',columns:3},
                            items :[
                                {
                                    xtype : 'label',
                                    colspan : 3,
                                    html : "<div style='border-style:solid;border-width:3px;border-color:green'><div><b>填写说明：</b></br>当xtype为单选框或多选框时，items填写格式如下,每一项写一行，以回车间隔。</br></br><b>例如</b>(key_name显示字段;key_code值字段;)</div><div style='color:blue;background-color:silver;'>{ boxLabel: '有效', name: 'status', inputValue: '1', checked:true }</br>{ boxLabel: '无效', name: 'status', inputValue: '0'}</div></div>"
                                }
                            ]
                        }
                        ,{
                            id : "cascade_group",
                            xtype : "fieldset",
                            colspan : 3,
                            width : '100%',
                            defaultType: 'textfield',
                            title: '多级联动扩展信息',
                            collapsible : true,
                            collapsed : true,
                            // hidden : true,
                            layout: {type: 'table',columns:3},
                            items : [                                
                                {
                                    fieldLabel: '二级字段标签',
                                    name : 'cascade_label2'
                                },{
                                    fieldLabel: '二级字段名',
                                    name : 'cascade_field2'
                                },{
                                    fieldLabel: '远程数据源URL2',
                                    name : 'url2'
                                },{
                                    xtype:"textareafield",
                                    fieldLabel: 'items2',
                                    name : 'items2',
                                    colspan : 3,
                                    allowBlank: true,
                                    width:615
                                },{
                                    fieldLabel: '三级字段标签',
                                    name : 'cascade_label3'
                                },{
                                    fieldLabel: '三级字段名',
                                    name : 'cascade_field3'
                                },{
                                    fieldLabel: '远程数据源URL3',
                                    name : 'url3'
                                },{
                                    xtype:"textareafield",
                                    fieldLabel: 'items3',
                                    name : 'items3',
                                    colspan : 3,
                                    allowBlank: true,
                                    width:615
                                }

                            ]
                        }

                    ],
                    tbar : tbar
                }
            ]
        });
        var viewport = new Ext.Viewport({
            layout: 'fit',
            autoScroll:true,
            renderTo: Ext.getBody(),
            items: [dataForm]
        });




        //获取url中的参数，如果传入了参数_id那么进行修改；否则，添加。
        if(_urlparams && _urlparams._id){
            Ext.Ajax.request({
                url: '/form/field/detail',
                params : {'_id' : _urlparams._id},
                method : 'get',
                success: function(response, opts) {
                    data =  Ext.decode(response.responseText);
                    init_form();
                },
                failure: function(response, opts) {
                    alert('加载失败......');
                    init_form();
                }
            });
        }
        function init_form(){
            if(!data){         
                return ;
            }
            for(var i in data){
                if(dataForm.form.findField(i)){
                    dataForm.form.findField(i).setValue(data[i]);
                }
            }
            if(data['allow_blank']) {
                Ext.getCmp('allow_blank').getComponent('allow_yes').setValue(true);
            }else{
                Ext.getCmp('allow_blank').getComponent('allow_no').setValue(true);
            }
            if(data['read_only']) {
                Ext.getCmp('read_only').getComponent('read_yes').setValue(true);
            }else{
                Ext.getCmp('read_only').getComponent('read_no').setValue(true);
            }

            // if(data['use_url']) {
            //     Ext.getCmp('use_url').getComponent('use_yes').setValue(true);
            // }else if(!data['use_url']){
            //     Ext.getCmp('use_url').getComponent('use_no').setValue(true);
            // }
        }
    });
</script>
<body>
</body>
</html>